<template>
  <div>
    <el-dialog
      :visible.sync="showAdd"
      @open="onOpen"
      @close="onClose"
      title="新增"
    >
      <div style="display: flex; flex-direction: row">
        <el-button type="primary" @click="addPro()">添加分类</el-button>
        <el-input
          style="margin-left: 40px"
          v-model="professionName"
          placeholder="请输入一级分类"
          clearable
        ></el-input>
      </div>
      <div style="display: flex; flex-direction: row; margin-top: 50px">
        <div style="width: 300px; height: 500px; overflow: auto">
          <div>
            <el-tree
              style="font-size: 20px"
              :data="data"
              node-key="id"
              default-expand-all
              :expand-on-click-node="false"
              @node-click="handleNodeClick"
              :highlight-current="true"
            >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span>{{ data.name }}</span>
                <span v-if="node.level == 1">
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => append(node, data)"
                    >添加</el-button
                  >
                </span>
                <span>
                  <el-button
                    type="text"
                    size="mini"
                    @click="() => remove(node, data)"
                  >
                    删除
                  </el-button>
                </span>
              </span>
            </el-tree>
          </div>
        </div>
        <div style="margin-left: 100px">
          <el-upload
            v-if="sectionId != 0"
            class="upload-demo"
            drag
            :action="uploadUrl + '?sectionId=' + sectionId+'&professionId='+professionId"
            :headers="headers"
            :limit="3"
            multiple
            ref="upload"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip">
              只能上传PDF/MP4文件，且不超过100MB
            </div>
          </el-upload>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="showAdd = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加章节" :visible.sync="dialogVisible" width="30%">
      <el-input v-model="sectionName"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSec">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  queryCustomSectionTree,
  addProfession,
  delProfession,
  addSection,
  delSection,
} from "@/api/course/index.js";
import { getToken } from "@/utils/auth";

export default {
  dicts: ["sys_course_type"],
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + "/course/uploads", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      sectionName: "",
      dialogVisible: false,
      professionName: "",
      data: undefined,
      professionId: 1,
      fileList: [],
      imageUrl: "",
      showAdd: false,
      sectionId: 0,
    };
  },
  created() {},
  mounted() {},
  methods: {
   
    handleNodeClick(data, node) {
      console.log(node)
      if (node.level == 2) {
        this.sectionId = node.data.id;
        this.professionId = node.parent.data.id;
      } else{
        this.sectionId=0;
      }
      console.log(this.sectionId)
    },

    //添加大分类
    addPro() {
      addProfession({ professionName: this.professionName }).then((res) => {
        if (res.code == 200) {
          this.$message.success("添加成功");
          this.getCustomSectionTree();
        }
      });
    },
    //
    onOpen() {
      this.showAdd = true;
      queryCustomSectionTree().then((res) => {
        this.data = res.data;
      });
    },
    onClose() {
      console.log(11)
      this.sectionId=0;
    },
    close() {
      console.log(2222)
      this.sectionId=0;
    },
    handleConfirm() {},
    handleUploadSuccess(res, file) {},

    // 上传前校检格式和大小
    handleBeforeUpload(file) {
      console.log(11111);
      // 校检文件大小
      if (this.fileSize) {
        const isLt = file.size / 1024 / 1024 < this.fileSize;
        if (!isLt) {
          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
          return false;
        }
        console.log(this.sectionId);
        if (this.sectionId == 0) {
        }
      }
      return true;
    },
    handleUploadError() {},
    beforeUpload() {
      if (this.sectionId == 0) {
        // this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
        this.$modal.msgError("请先选择左侧章节");
        return false;
      }
    },

    handleRemove(file, fileList) {},

    beforeRemove() {},
    handlePreview() {},

    handleExceed() {},

    append(data) {
      console.log(data);
      this.dialogVisible = true;
      this.professionId = data.data.id;
    },
    //添加章节
    addSec() {
      addSection({
        professionId: this.professionId,
        sectionName: this.sectionName,
      }).then((res) => {
        this.dialogVisible = false;
        this.getCustomSectionTree();
      });
    },

    remove(node, data) {
      console.log(node);
      if (node.level == 1) {
        delProfession({ professionId: data.id }).then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getCustomSectionTree();
          }
        });
      } else {
        delSection({
          sectionId: data.id,
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getCustomSectionTree();
          }
        });
      }
    },

    getCustomSectionTree() {
      queryCustomSectionTree().then((res) => {
        this.data = res.data;
      });
    },

    submitSec() {},
  },
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
